<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>QQ消息列表</title>
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style>
			.head {
				height: 40px;
				line-height: 40px;
				background: #13b9f7;
			}
			
			.logo {
				margin-top: 8px;
			}
			
			li {
				height: 60px;
			}
			
			li img {
				width: 40px;
			}
			
			.text {
				display: block;
			}
			
			.mylist {
				height: 42px;
				background: rgba(244, 243, 254, 0.69);
				border: 1px solid #CCCCCC;
				padding-top: 2px;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="row head">
				<div class="col-xs-2">
					<img class="img-responsive logo" src="img/1.jpg" alt="" />
				</div>
				<div class="col-xs-2 col-xs-offset-8">
					<img class="img-responsive more " src="img/2.jpg" alt="" />
				</div>
			</div>
			<div class="row">
				<ul class="list-group">
					<li class="list-group-item ">
						<div class="col-xs-10">
							<div class="media">
								<div class="media-left">
									<a href="#" class="media-object">
										<img src="img/3.jpg" alt="">
									</a>
								</div>
								<div class="media-body">
									<h4 class="media-heading">任务3-进击的魔群</h4>
									<p>闭包的使用原理</p>

								</div>
							</div>
						</div>
						<div class="col-xs-2">
							<span class="badge">1</span>

						</div>
					</li>
					<li class="list-group-item ">
						<div class="col-xs-10">
							<div class="media">
								<div class="media-left">
									<a href="#" class="media-object">
										<img src="img/4.jpg" alt="">
									</a>
								</div>
								<div class="media-body">
									<h4 class="media-heading">群通知</h4>
									<p>教导员 魔铃 邀请你加入群</p>

								</div>
							</div>
						</div>

					</li>
					<li class="list-group-item ">
						<div class="col-xs-10">
							<div class="media">
								<div class="media-left">
									<a href="#" class="media-object">
										<img src="img/5.jpg" alt="">
									</a>
								</div>
								<div class="media-body">
									<h4 class="media-heading">前端开发群3</h4>
									<p>[全体消息]你好，我是新手</p>

								</div>
							</div>
						</div>
						<div class="col-xs-2">
							<span class="badge">99+</span>

						</div>
					</li>
					<li class="list-group-item ">
						<div class="col-xs-10">
							<div class="media">
								<div class="media-left">
									<a href="#" class="media-object">
										<img src="img/6.jpg" alt="">
									</a>
								</div>
								<div class="media-body">
									<h4 class="media-heading">群消息</h4>
									<p>Bootstrap.css</p>

								</div>
							</div>
						</div>
						<div class="col-xs-2">
							<span class="badge">1</span>

						</div>
					</li>
					<li class="list-group-item ">
						<div class="col-xs-10">
							<div class="media">
								<div class="media-left">
									<a href="#" class="media-object">
										<img src="img/7.jpg" alt="">
									</a>
								</div>
								<div class="media-body">
									<h4 class="media-heading">QQ购物车</h4>
									<p>清仓连衣裙1元秒杀</p>

								</div>
							</div>
						</div>
					</li>
					<li class="list-group-item ">
						<div class="col-xs-10">
							<div class="media">
								<div class="media-left">
									<a href="#" class="media-object">
										<img src="img/4.jpg" alt="">
									</a>
								</div>
								<div class="media-body">
									<h4 class="media-heading">群通知</h4>
									<p>教导员 魔铃 邀请你加入群</p>

								</div>
							</div>
						</div>

					</li>
					<li class="list-group-item ">
						<div class="col-xs-10">
							<div class="media">
								<div class="media-left">
									<a href="#" class="media-object">
										<img src="img/5.jpg" alt="">
									</a>
								</div>
								<div class="media-body">
									<h4 class="media-heading">前端开发群3</h4>
									<p>[全体消息]你好，我是新手</p>

								</div>
							</div>
						</div>
						<div class="col-xs-2">
							<span class="badge">99+</span>

						</div>
					</li>
					<li class="list-group-item ">
						<div class="col-xs-10">
							<div class="media">
								<div class="media-left">
									<a href="#" class="media-object">
										<img src="img/6.jpg" alt="">
									</a>
								</div>
								<div class="media-body">
									<h4 class="media-heading">群消息</h4>
									<p>Bootstrap.css</p>

								</div>
							</div>
						</div>
						<div class="col-xs-2">
							<span class="badge">1</span>

						</div>
					</li>
				</ul>
			</div>
			<div class="row mylist navbar-fixed-bottom">
				<div class="col-xs-4 text-center">
					<span class="glyphicon glyphicon-envelope"></span>
					<span class="text">消息</span>
				</div>
				<div class="col-xs-4 text-center">
					<span class="glyphicon glyphicon-user"></span>
					<span class="text">联系人</span>
				</div>
				<div class="col-xs-4 text-center">
					<span class="glyphicon glyphicon-star"></span>
					<span class="text">动态</span>
				</div>

			</div>
		</div>

	</body>

</html>